<template>
	<view class="container">
		<!-- 个人信息头部 -->
		<view class="profile-header">
			<view class="avatar-container">
				<image :src="imgPath" class="avatar"></image>
			</view>
			<view class="user-info">
				<text class="user-name">{{ name }}</text>
				<text class="student-id">学号: {{ studentNumber }}</text>
			</view>
		</view>
		
		<!-- 个人详细信息 -->
		<view class="info-section">
			<view class="info-item">
				<text class="info-label">系别</text>
				<text class="info-value">{{ department }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">专业</text>
				<text class="info-value">{{ major }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">联系电话</text>
				<text class="info-value">{{ phone }}</text>
			</view>
			<view class="info-item">
				<text class="info-label">邮箱</text>
				<text class="info-value">{{ email }}</text>
			</view>
		</view>
		
		<!-- 功能菜单 -->
		<view class="function-section">
			<view class="function-title">功能</view>
			<view class="function-list">
				<view class="function-item" @click="navigateTo('modify-password')">
					<text class="function-name">修改密码</text>
					<u-icon name="arrow-right" size="28" color="#999"></u-icon>
				</view>
				<view class="function-item" @click="navigateTo('update')">
					<text class="function-name">修改个人信息</text>
					<u-icon name="arrow-right" size="28" color="#999"></u-icon>
				</view>
				<view class="function-item" @click="navigateTo('help-center')">
					<text class="function-name">帮助中心</text>
					<u-icon name="arrow-right" size="28" color="#999"></u-icon>
				</view>
				<view class="function-item" @click="navigateTo('feedback')">
					<text class="function-name">意见反馈</text>
					<u-icon name="arrow-right" size="28" color="#999"></u-icon>
				</view>
			</view>
		</view>
		
		<!-- 退出登录按钮 -->
		<view class="logout-btn" @click="logout()">
			<text>退出登录</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// 学生信息，从缓存获取
			imgPath: '/static/image/avatar.png',
			name: '',
			studentNumber: '',
			department: '',
			major: '',
			phone: '',
			email: '',
			photo:''
		}
	},
	onLoad() {
		// 页面加载时从缓存获取学生信息
		this.getStudentInfoFromStorage();
	},
	// 监听缓存数据变化，实时更新页面
	onShow() {
		this.getStudentInfoFromStorage();
	},
	methods: {
		// 从缓存获取学生信息
		getStudentInfoFromStorage() {
			const studentInfo = uni.getStorageSync('studentInfo');
			
			if (!studentInfo) {
				uni.showToast({
					icon: 'none',
					title: '未获取到学生信息'
				});
				// 跳转到登录页
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages/login/index'
					});
				}, 1500);
				return;
			}
			
			// 直接从缓存数据赋值到页面
			this.name = studentInfo.name || '';
			this.studentNumber = studentInfo.studentNumber || '';
			this.department = studentInfo.department || '';
			this.major = studentInfo.major || '';
			this.phone = studentInfo.phone || '';
			this.email = studentInfo.email || '';
			
			// 处理头像信息
			if (studentInfo.photo) {
				this.imgPath = studentInfo.photo;
			}
		},
		
		// 导航到其他页面
		navigateTo(page) {
			// 根据不同功能跳转到相应页面
			switch(page) {
				case 'modify-password':
					uni.navigateTo({
						url: '/pages/modify-password/modify-password'
					});
					break;
				case 'update':
					uni.navigateTo({
						url: '/pages/update/update?studentNumber=' + this.studentNumber
					});
					break;
				case 'help-center':
					uni.navigateTo({
						url: '/pages/help-center/help-center'
					});
					break;
				case 'feedback':
					uni.navigateTo({
						url: '/pages/feedback/feedback'
					});
					break;
			}
		},
		
		// 退出登录
		logout() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 清除登录状态和学生信息缓存
						uni.removeStorageSync('token');
						uni.removeStorageSync('studentInfo');
						
						// 跳转到登录页面
						uni.redirectTo({
							url: '/pages/login/index'
						});
					}
				}
			});
		}
	}
}
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.profile-header {
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1px solid #eee;
}

.avatar-container {
	margin-right: 30rpx;
}

.avatar {
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
}

.user-info {
	flex: 1;
}

.user-name {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.student-id {
	font-size: 28rpx;
	color: #666;
}

.info-section {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 0 30rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25rpx 0;
	border-bottom: 1px solid #eee;
}

.info-item:last-child {
	border-bottom: none;
}

.info-label {
	font-size: 30rpx;
	color: #333;
}

.info-value {
	font-size: 30rpx;
	color: #666;
	text-align: right;
}

.function-section {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 0 30rpx;
}

.function-title {
	font-size: 28rpx;
	color: #999;
	padding: 25rpx 0;
	border-bottom: 1px solid #eee;
}

.function-list {
	/* 列表内容样式 */
}

.function-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25rpx 0;
	border-bottom: 1px solid #eee;
}

.function-item:last-child {
	border-bottom: none;
}

.function-name {
	font-size: 30rpx;
	color: #333;
}

.logout-btn {
	width: 90%;
	margin: 50rpx auto;
	padding: 25rpx 0;
	text-align: center;
	border: 1px solid #ff5722;
	border-radius: 8rpx;
}

.logout-btn text {
	font-size: 32rpx;
	color: #ff5722;
}
</style>
    